<!--
 * @Description: 地图demo
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2020年8月20日 16:41:08
 * @LastEditTime: 2020-09-08 14:42:14
-->
<template>
    <ScreenContainer class="mapCharts demo">
        <!-- 标准山西地图 -->
        <div class="box"
             :color="['#aaff7f','#00ff7f']">
            <mapChart :apiMethod="getData"
                      apiParam="getMap1"
                      title="标准山西地图"
                      mapType="shanxi"
                      :geoJson="geoShanxi"
                      :inRangeColors="['#aaff7f','#00ff7f', '#00aa7f','#005500', '#ffaa00']" />
        </div>
        <!-- 标准中国地图 -->
        <div class="box"
             :color="['#aaff7f','#00ff7f']"
             reverse>
            <mapChart :apiMethod="getData"
                      apiParam="getMap2"
                      title="标准中国地图"
                      mapType="zhongguo"
                      :geoJson="geoChina" />
        </div>
    </ScreenContainer>
</template>

<script>
import { getData } from '@/api/demo' //API 请求数据
import ScreenContainer from '@/components/pages/screenContainer.vue' //全局容器
import mapChart from '@/components/charts/default/mapChart.vue' //地图
import geoShanxi from '@/utils/geo_shanxi.json' //地图地理坐标
import geoChina from '@/utils/geo_china.json' //地图地理坐标

export default {
    name: 'mapCharts',
    components: {
        mapChart,
        ScreenContainer,
    },
    data() {
        return {
            getData, //api方法
            geoShanxi, //山西地图地理坐标
            geoChina,
        }
    },
}
</script>
<style lang="scss" scoped>
.demo {
    .box {
        height: 100%;
        width: 60%;
        &:first-child {
            width: 40%;
        }
    }
}
</style>
